<template>
	<view>
		<y-tabs :list='tabsList' v-model='query.category_id' @change="changeTabs"></y-tabs>
		<z-paging-mini ref='paging' v-model="list" @query='getList' use-page-scroll>
			<view class="p-15 flex flex-column grid-gap-12">
				<view v-for="(item,index) in list" :key='index' @click="$page.open('/pages/article/index?id='+item.id)" class="flex p-10  bg-black-1 round-6">
					<image :src="item.thumb" class="w-80 flex-shrink round-6" mode="widthFix"
						></image>
					<view class=" flex-1 flex flex-column pl-10 py-4">
						<text class="flex-1 text-f5">{{item.title}}</text>
						<text class="flex-1  text-999 fs-12">{{item.desc}}</text>
						<vie class="flex flex-x-space-between text-666 fs-12">
							<text>{{item.create_at}}</text>
							<view class="flex flex-y-center grid-gap-2">
								<text class="iconfont icon-yanjing fs-14"></text>
								<text>{{item.view}}</text>
							</view>
						</vie>
					</view>
				</view>
			</view>
		</z-paging-mini>
	</view>
</template>

<script setup>
	import { nextTick, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $page } from '@/utils';
	const query = ref({
		category_id: 0
	})
	const list = ref([])
	const tabsList = ref([])
	const paging = ref()
	onLoad(() => {
		getCategory()
	})

	const getCategory = () => {
		$http.get('Article/getCategoryList').then(res => {
			tabsList.value = res.data
		})
	}

	const getList = (page, limit) => {
		uni.showLoading({
			title: '加载中...'
		})
		$http.get('Article/getList', { page: 1, limit: 10, ...query.value }).then(res => {
			paging.value.complete(res.data)
		})
	}

	const changeTabs = () => {
		paging.value.reload()
	}
</script>

<style>
	page {
		letter-spacing: 0px;
	}
</style>